<template>
  <div class="index">
    <div class="footer"></div>
    <p>日平均播放量</p>
    <div class="rightCentEchart"></div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { getDayAverage } from "@/api/echarts";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
const router = useRouter();

const dayListRef = ref([]); // 日期列表
const playNumRef = ref([]); // 播放量
const shareNumRef = ref([]); // 转发量

onMounted(() => {
  getData();
});
/**
 * 请求数据
 */
async function getData() {
  let res = await getDayAverage();
  if (res.code == 0) {
    const {
      data: { dayList, playNum, shareNum },
    } = res;
    dayListRef.value = dayList;
    playNumRef.value = playNum;
    shareNumRef.value = shareNum;
    initEcharts();
  } else if (res.msg.includes("登录")) {
    router.replace("/");
  }
}
/**
 * 初始化图表
 */
function initEcharts() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.querySelector(".rightCentEchart"));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["播放量", "转发量"],
      top: "16%",
      right: "10%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: 14, //字体大小
      },
    },

    grid: {
      top: "30%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    // 保存图片
    // toolbox: {
    //   feature: {
    //     saveAsImage: {}
    //   }
    // },
    xAxis: {
      type: "category",
      boundaryGap: false,
      // X轴文字
      data: dayListRef.value,
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(255, 255, 255, 0.7)",
        },
      },
      // X轴轴线
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(25, 186, 139, 0.17)",
        },
      },
    },
    yAxis: {
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12,
        },
      },
      // 修改分割线的颜色
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    series: [
      {
        name: "播放量",
        type: "line",
        stack: "Total",
        data: playNumRef.value,
        //第一条 线是圆滑
        smooth: true,
        // 单独修改线的样式
        lineStyle: {
          color: "#0184d5",
          width: 2,
        },
        // 填充区域
        areaStyle: {
          // 渐变色，只需要复制即可
          color: echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(1, 132, 213, 0.4)", // 渐变色的起始颜色
              },
              {
                offset: 0.8,
                color: "rgba(1, 132, 213, 0.1)", // 渐变线的结束颜色
              },
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)",
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#0184d5",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: "转发量",
        type: "line",
        smooth: true,
        data: shareNumRef.value,
        lineStyle: {
          normal: {
            color: "#00d887",
            width: 2,
          },
        },
        areaStyle: {
          normal: {
            color: echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0, 216, 135, 0.4)",
                },
                {
                  offset: 0.8,
                  color: "rgba(0, 216, 135, 0.1)",
                },
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
          },
        },
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 5,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#00d887",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
    ],
  });
  // 图表跟随浏览器自适应
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  p {
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 0;
  }
  .rightCentEchart {
    width: 100%;
    height: 100%;
  }
  // 使用伪元素做边框
  .footer {
    &::before {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-left: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &::after {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-right: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>
